<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>中国朝代</title>
<style>
h1 { text-align:center; }
table { border-collapse:collapse; margin:auto; }
td { border:1px solid black; text-align:center; white-space:nowrap; padding:5px; }
</style>
</head>
<body>
<h1>中国朝代</h1>
<p align="center">超过 <span id="rv"></span> 年 <input type="range" id="range" min="1" max="200" value="1" onchange="filter(this.value)"></p>
<table id="table">
<tr><td>朝代</td><td>起始</td><td>结束</td><td>延续(年)</td><td>百分比</td></tr>
</table>
<div id="chart"></div>
</body>
<script>
var range = document.getElementById('range');
var table = document.getElementById('table');
var pmax = 600;
var dynasty = new Array();
var item = new Array();
item.push(['夏', -2029, -1559]);
item.push(['商', -1559, -1046]);
item.push(['西周', -1046, -771]);
item.push(['东周', -770, -256]);
item.push(['秦', -221, -207]);
item.push(['西楚', -206, -202]);
item.push(['西汉', -202, 8]);
item.push(['新', 8, 23]);
item.push(['玄汉', 23, 25]);
item.push(['东汉', 25, 220]);
item.push(['曹魏', 220, 266]);
item.push(['蜀汉', 221, 263]);
item.push(['孙吴', 222, 280]);
item.push(['西晋', 266, 316]);
item.push(['东晋', 317, 420]);
item.push(['刘宋', 420, 479]);
item.push(['南齐', 479, 502]);
item.push(['南梁', 502, 557]);
item.push(['南陈', 557, 589]);
item.push(['北魏', 386, 534]);
item.push(['西魏', 535, 557]);
item.push(['北周', 557, 581]);
item.push(['东魏', 534, 550]);
item.push(['北齐', 550, 577]);
item.push(['隋', 581, 618]);
item.push(['唐', 618, 907]);
item.push(['后梁', 907, 923]);
item.push(['后唐', 923, 936]);
item.push(['后晋', 936, 947]);
item.push(['后汉', 947, 951]);
item.push(['后周', 951, 960]);
item.push(['南吴', 902, 937]);
item.push(['南唐', 937, 975]);
item.push(['前蜀', 907, 925]);
item.push(['后蜀', 933, 966]);
item.push(['南汉', 917, 971]);
item.push(['南楚', 896, 951]);
item.push(['吴越', 907, 978]);
item.push(['闽国', 909, 945]);
item.push(['荆南', 924, 963]);
item.push(['北汉', 951, 979]);
item.push(['北宋', 960, 1127]);
item.push(['南宋', 1127, 1279]);
item.push(['辽', 916, 1125]);
item.push(['西夏', 1038, 1227]);
item.push(['金', 1115, 1234]);
item.push(['元', 1271, 1368]);
item.push(['明', 1368, 1644]);
item.push(['清', 1644, 1911]);
item.push(['中华民国', 1912, 1949]);
item.push(['中华人民共和国', 1949, 2019]);
//var json = JSON.stringify(item);
//document.getElementById('json').innerHTML=json;
//console.log(item);
for(var i=0; i<item.length; i++){
	dynasty.push([item[i][0], item[i][1], item[i][2], item[i][2] - item[i][1]]);
}

function filter(v){
	table.innerHTML = '';
	var tr = document.createElement('tr');
	var td = document.createElement('td');
	td.textContent = '朝代';
	tr.appendChild(td);
	td = document.createElement('td');
	td.textContent = '起始';
	tr.appendChild(td);
	td = document.createElement('td');
	td.textContent = '结束';
	tr.appendChild(td);
	td = document.createElement('td');
	td.textContent = '延续(年)';
	tr.appendChild(td);
	td = document.createElement('td');
	td.textContent = '百分比';
	tr.appendChild(td);
	table.appendChild(tr);
	document.getElementById('rv').textContent = v;
	for(var i=0; i<dynasty.length; i++){
		var tr = document.createElement('tr');
		if(dynasty[i][3] >= v){
			var td = document.createElement('td');
			td.textContent = dynasty[i][0];
			tr.appendChild(td);
			td = document.createElement('td');
			td.textContent = dynasty[i][1];
			tr.appendChild(td);
			td = document.createElement('td');
			td.textContent = dynasty[i][2];
			tr.appendChild(td);
			td = document.createElement('td');
			td.textContent = dynasty[i][3];
			tr.appendChild(td);
			td = document.createElement('td');
			var progress = document.createElement('progress');
			progress.max = pmax;
			progress.value = dynasty[i][3];
			progress.textContent = dynasty[i][0];
			td.appendChild(progress);
			tr.appendChild(td);
			table.appendChild(tr);
		}
	}
}

filter(1);
</script>
</html>
